<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style>
		.menu ul {
			border-top: 15px solid black;
			padding: 0 10px;
		}
		.menu li{
			float: left;
			list-style: none;
		}
		.menu ul li a{
			color: #fff;
			float: left;
			margin: 0 5px;
			font-size: 14px;
			height: 50px;
			line-height: 50px;
			text-align: center;
			width: 65px;
			padding: 10px 5px;
			background: #151515;
			-moz-border-radius: 0 0 5px 5px;
			-webkit-border-radius: 0 0 5px 5px;
			border-radius: 0 0 5px 5px;
			-moz-box-shadow: 0 0 1px #ccc,inset 0 0 2px #fff;
			-webkit-box-shadow: 0 0 1px #ccc,inset 0 0 2px #fff;
			box-shadow: 0 0 1px #ccc,inset 0 0 2px #fff;
			text-shadow: 0 1px 1px #686868;
			text-decoration: none;

			-moz-transform-origin: left top;
			-webkit-transform-origin: left top;
			-o-transform-origin: left top;
			-ms-transform-origin: left top;
			transform-origin: left top;
		}
		.menu ul li.translate a{
			background: #2EC7D2;
		}
		.menu ul li.translate a:hover {
			-moz-transform: translate(-10px,-10px);
			-webkit-transform: translate(-10px,-10px);
			-o-transform: translate(-10px,-10px);
			-ms-transform: translate(-10px, -10px);
			transform: translate(-10px,-10px);
		}

		.menu ul li.translate-x a {
			background: #8FDD21;
		}
		.menu ul li.translate-x a:hover {
			-moz-transform: translateX(-10px);
			-webkit-transform: translateX(-10px);
			-o-transform: translateX(-10px);
			-ms-transform: translateX(-10px);
			transform: translateX(-10px);
		}

		.menu ul li.translate-y a {
			background: #F45917;
		}
		.menu ul li.translate-y a:hover {
			-moz-transform: translateY(-10px);
			-webkit-transform: translateY(-10px);
			-o-transform: translateY(-10px);
			-ms-transform: translateY(-10px);
			transform: translateY(-10px);
		}

		.menu ul li.rotate a {
			background: #D50E19;
		}
		.menu ul li.rotate a:hover {
			-moz-transform: rotate(45deg);
			-webkit-transform: rotate(45deg);
			-o-transform: rotate(45deg);
			-ms-transform: rotate(45deg);
			transform: rotate(45deg);
		}

		.menu ul li.scale a {
			background: #cdddf2;
		}
		.menu ul li.scale a:hover {
			-moz-transform: scale(0.8,0.8);
			-webkit-transform: scale(0.8,0.8);
			-o-transform: scale(0.8,0.8);
			-ms-transform: scale(0.8,0.8);
			transform: scale(0.8,0.8);
		}

		.menu ul li.scale-x a {
			background: #0fDD21;
		}
		.menu ul li.scale-x a:hover {
			-moz-transform: scaleX(0.8);
			-webkit-transform: scaleX(0.8);
			-o-transform: scaleX(0.8);
			-ms-transform: scaleX(0.8);
			transform: scaleX(0.8);
		}

		.menu ul li.scale-y a {
			background: #cd5917;
		}
		.menu ul li.scale-y a:hover {
			-moz-transform: scaleY(1.2);
			-webkit-transform: scaleY(1.2);
			-o-transform: scaleY(1.2);
			-ms-transform: scaleY(1.2);
			transform: scaleY(1.2);
		}

		.menu ul li.skew a {
			background: #519;
		}
		.menu ul li.skew a:hover {
			-moz-transform: skew(45deg,15deg);
			-webkit-transform: skew(45deg,15deg);
			-o-transform: skew(45deg,15deg);
			-ms-transform: skew(45deg,15deg);
			transform: skew(45deg,15deg);
		}

		.menu ul li.skew-x a {
			background: #D50;
		}
		.menu ul li.skew-x a:hover {
			-moz-transform: skewX(-30deg);
			-webkit-transform: skewX(-30deg);
			-o-transform: skewX(-30deg);
			-ms-transform: skewX(-30deg);
			transform: skewX(-30deg);
		}

		.menu ul li.skew-y a {
			background: #E19;
		}
		.menu ul li.skew-y a:hover {
			-moz-transform: skewY(30deg);
			-webkit-transform: skewY(30deg);
			-o-transform: skewY(30deg);
			-ms-transform: skewY(30deg);
			transform: skewY(30deg);
		}


	</style>
</head>
<body>
<div class="menu">
	<ul class="clearfix">
		<li class="item translate"><a href="#">Translate</a></li>
		<li class="item translate-x"><a href="#">TranslateX</a></li>
		<li class="item translate-y"><a href="#">TranslateY</a></li>
		<li class="item rotate"><a href="#">Rotate</a></li>
		<li class="item scale"><a href="#">Scale</a></li>
		<li class="item scale-x"><a href="#">ScaleX</a></li>
		<li class="item scale-y"><a href="#">ScaleY</a></li>
		<li class="item skew"><a href="#">Skew</a></li>
		<li class="item skew-x"><a href="#">SkewX</a></li>
		<li class="item skew-y"><a href="#">SkewY</a></li>
	</ul>
</div>
</body>
</html>